<template>
  <!-- 活动规则弹窗 -->
  <view class="mode">
    <view
      class="rule-content"
      :style="{
        backgroundImage: `url(${
          ruleType == 'rule'
            ? oss2('others/2023Q4Code/rule_bg.png')
            : oss2('others/2023Q4Code/pravocy_bg.png')
        })`,
      }"
    >
      <view
        class="rule_close"
        :style="{
          backgroundImage: `url(${oss2('others/2023Q4Code/close_icon.png')})`,
        }"
        @click.stop="emits('close')"
      ></view>

      <view class="rule_content" :class="ruleType == 'rule' ? '' : 'high'">
        <image
          mode="widthFix"
          :src="
            ruleType == 'rule'
              ? oss2('others/2023Q4Code/hdsm.jpg')
              : oss2('others/2023Q4Code/yssm.jpg')
          "
        />
      </view>

      <view
        class="rule_kefu"
        v-if="ruleType == 'rule'"
        @click.stop="emits('openkf')"
        :style="{
          backgroundImage: `url(${oss2('others/panda2023/but_lxkf.png')})`,
        }"
      ></view>
    </view>
  </view>
</template>
    
    <script setup>
import { oss2 } from "@/utils/utils";
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  ruleType: {
    type: String,
    default: "rule",
  },
});
const emits = defineEmits(["close", "closekf", "openkf"]);
</script>
    
    <style lang="less" scoped>
.mode {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 98;
  background-color: rgba(10, 28, 108, 0.7);
  .rule-content {
    position: absolute;
    width: 312px;
    height: 549px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 312px 100%;
    box-sizing: border-box;
    padding-top: 124px;
    position: absolute;
    top: calc(50vh - 270px);
    left: 31px;

    .rule_close {
      position: absolute;
      top: 75px;
      right: 20px;
      width: 36px;
      height: 36px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 36px 100%;
    }

    .rule_content {
      width: 260px;
      height: 340px;
      overflow-y: auto;
      margin: 0 auto;
      image {
        width: 260px;
      }
    }
    .high {
      height: 390px;
    }
    .rule_kefu {
      width: 146px;
      height: 44px;
      margin: 0 auto;
      margin-top: 13px;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 146px 100%;
    }
  }
}
</style>
    
